<template>
  <div class="filter-bar">
    <el-popover
      placement="bottom"
      title="数据列表"
      width="350"
      style="height:350px;"
      trigger="click"
    >
      <el-input
        placeholder="请输入内容"
        v-model="input3"
        class="input-with-select"
      >
        <i class="el-icon-search el-input__icon" slot="suffix"> </i>
      </el-input>
      <el-card
        class="box-card"
        style="height:250px;overflow: auto;margin-top: 5px;"
      >
        <div v-for="item in allFields" :key="item.id" class="text item">
          <span>{{ item.fieldEnName }} </span>
          <span style="float:right;"><i class="el-icon-close el-icon--right"> </i></span>
        </div>
      </el-card>

      <el-button
        slot="reference"
        type="primary"
        style="border-color: #D3DAE6 !important;background-color: #fff;border-radius: 5px; color:#000; width:100%;"
        ><span></span
        ><i class="el-icon-arrow-down el-icon--right" style="float:right;"></i
      ></el-button>
    </el-popover>
  </div>
</template>

<script>
export default {
  name: 'chartFilter',
  components: {},
  props: ['allFields','selectedFields'],
  data() {
    return {
      
    };
  },
  computed: {},
  methods: {},
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: center;
  width: 350px;
  height: 500px;
  overflow-y: auto;
}

.item {
  width: 280px;
  height: 30px;
  border-bottom: 1px solid #eef2f7;
  padding: 5px;
}
.item span {
  padding-left: 20px;
  float: left;
}
</style>
